<template>
  <div v-if="indexData" class="page-website-wrap">
    <div class="relative">
      <div class="page-head flex align-center space-center">
        <div class="flex align-center mt30">
          <NuxtLink to="/">
            <img src="@img/logo.png" class="head-logo" alt="website" />
          </NuxtLink>
          <div style="margin-left: 15.8vw">
            <div class="flex fs-24 white align-center">
              <div
                v-for="(v, i) in configMenu"
                :key="v.key"
                :class="`cursor fw-800 ${i > 0 ? 'ml-60' : ''}`"
                @click="goUrl(v.url)"
              >
                <el-tooltip
                  v-if="v.sub_menu && v.sub_menu.length > 0"
                  popper-class="pull-down"
                  effect="light"
                  placement="bottom"
                >
                  {{ v.name }}
                  <template #content>
                    <div class="pull-down-list">
                      <div
                        v-for="item in v.sub_menu"
                        :key="item.key"
                        class="pull-down-item"
                        @click="goUrl(item.url)"
                      >
                        {{ item.name }}
                      </div>
                    </div>
                  </template>
                </el-tooltip>
                <template v-else>
                  {{ v.name }}
                </template>
              </div>
              <div class="ml-60 flex align-center fw-800" style="border: none">
                <el-tooltip
                  popper-class="pull-down"
                  effect="light"
                  placement="bottom"
                >
                  <div class="flex align-center">
                    <img src="@img/cn-icon.png" class="cn-icon" alt="arrow" />
                    <div class="ml10 fs-24 white fw-800">
                      {{ state.language.toUpperCase() }}
                    </div>
                  </div>
                  <template #content>
                    <div class="pull-down-list" style="width: 100px">
                      <div
                        v-for="item in langList"
                        :key="item"
                        class="pull-down-item"
                        @click="updateLang(item)"
                      >
                        {{ item }}
                      </div>
                    </div>
                  </template>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="banner-wrap">
      <div class="flex align-center space-center flex-colunm">
        <Swiper
          class="swiper-wrap"
          :navigation="true"
          :modules="[Navigation]"
          @swiper="bannerSwiper.onSwiper"
          @slide-change="bannerSwiper.onSlideChange"
        >
          <SwiperSlide v-for="(v, i) in bannerData" :key="i">
            <img
              :src="v.image"
              class="banner-img cursor"
              alt="banner"
              @click="goUrl(v.link)"
            />
          </SwiperSlide>
        </Swiper>
        <div class="banner-navigation">
          <div class="navigation-list flex">
            <div
              v-for="(v, i) in bannerSwiper.state.bannerList"
              :key="i"
              :class="`navigation-item cursor ${bannerSwiper.state.now_idx == i ? 'active' : ''}`"
              @click="bannerSwiper.slideTo(i)"
            ></div>
          </div>
        </div>
      </div>
    </div>
    <div class="relative mt60">
      <div class="title txt-center fw-800">{{ otherData.popular }}</div>
      <div class="flex flex-colunm align-center space-center">
        <div style="width: 68.5vw; margin-top: 40px">
          <div class="tab-wrap flex space-between">
            <div
              v-for="(v, i) in popularData"
              :key="i"
              :class="`tab-item-wrap fw-800 ${i == 1 ? 'tab-center' : ''} ${productIndex == i ? 'active' : ''}`"
              @click="productIndex = i"
            >
              {{ v.name }}
            </div>
          </div>
          <div class="border-wrap"></div>
        </div>
      </div>
      <div class="flex align-center space-center overflow-hidden">
        <div
          v-if="popularData[productIndex]"
          data-core-scroller
          class="swiper-shop-wrap shop-scroll-view flex flex-colunm overflow-hidden"
        >
          <div
            v-if="cateGoryIndex > 0"
            class="swiper-button-prev x-center"
            @click="cateGoryChange(-1)"
          ></div>
          <div class="relative">
            <div class="overflow-hidden" style="height: 30.875vw">
              <div
                id="shop-scroll"
                data-core-scroller
                style="overscroll-behavior-x: contain"
              >
                <div style="display: inline-flex">
                  <div
                    v-for="item in popularData[productIndex].products"
                    :key="item.title"
                    class="swiper-shop-item relative cursor"
                    style="scroll-snap-align: start"
                  >
                    <div class="itemview" @click="goUrl(item.url)">
                      <img :src="item.cover" />
                      <div class="shop-introduce">
                        <div class="shop-title fw-800">{{ item.title }}</div>
                        <div class="shop-tag" style="font-weight: bold">
                          <div class="ellipsis">
                            {{ item.tags }}
                          </div>
                        </div>
                        <div class="shop-detail ellipsis-multiline fw-400">
                          {{ item.describe }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="swiper-button-next x-center"
            @click="cateGoryChange(1)"
          ></div>
          <div class="flex align-center space-center mt40">
            <div
              class="shop-all-btn flex align-center space-center fw-800"
              @click="goViewAll"
            >
              {{ otherData.view_all }} >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="banner-wrap mt95 placard">
      <div class="flex align-center flex-colunm space-center">
        <Swiper
          :navigation="true"
          :modules="[Navigation]"
          class="swiper-wrap"
          @swiper="posterSwiper.onSwiper"
        >
          <SwiperSlide
            v-for="(v, i) in posterData"
            :key="i"
            @slide-change="posterSwiper.onSlideChange"
          >
            <img
              :src="v.image"
              class="placard-banner banner-img"
              alt="banner"
              @click="goUrl(v.link)"
            />
          </SwiperSlide>
        </Swiper>
        <div class="banner-navigation">
          <div class="navigation-list flex">
            <!-- {{ posterSwiper.slideTo }} -->
            <div
              v-for="(v, i) in posterSwiper.state.bannerList"
              :key="i"
              :class="`navigation-item cursor ${posterSwiper.state.now_idx == i ? 'active' : ''}`"
              @click="posterSwiper.slideTo(i)"
            ></div>
          </div>
        </div>
      </div>
    </div>
    <div class="message-wrap flex flex-colunm align-center space-center">
      <div class="message-list flex flex-colunm">
        <div class="flex space-between message-title">
          <div class="message-title title fw-800">
            {{ otherData.latest_news }}
          </div>
          <a href="/news" target="__blank" class="fs36 white flex align-center">
            <div class="mr12">
              {{ otherData.view_all }}
            </div>
            <img src="@img/total-icon.png" class="total-icon" />
          </a>
        </div>
        <div class="flex">
          <div v-for="(v, i) in newsData" :key="i" class="message-row">
            <img :src="v.cover" />
            <div class="message-detail">
              <div class="detail-txt ellipsis-multiline fw-500">
                {{ v.title }}
              </div>
              <div class="time ellipsis fw-500">{{ v.publish_date }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex align-center space-center">
      <div class="feedback-wrap relative">
        <div class="title txt-center fw-800">{{ messageData.title }}</div>
        <div class="txt-center feedback-instructions fw-500">
          {{ messageData.illustration }}
        </div>
        <div class="flex flex-colunm align-center space-center">
          <div class="feedback-email">
            <input
              v-model="feedbackData.email"
              maxlength="1000"
              :placeholder="messageData.eamil"
              type="text"
            />
          </div>
          <div class="feedback-message">
            <textarea
              v-model="feedbackData.context"
              :placeholder="messageData.message"
              maxlength="1000"
              type="text"
            />
          </div>
        </div>
        <div class="feedback-icon">
          <img src="@img/feedback-icon.png" @click="feedbackSend" />
        </div>
      </div>
    </div>
    <div class="website-footer-wrap flex align-center space-center">
      <div class="flex space-between">
        <div class="flex">
          <template v-for="(v, i) in footerData" :key="i">
            <div v-if="i != footerData.length - 1" class="footer-instructions">
              <div class="footer-title ellipsis mb23 fw-800">{{ v.name }}</div>
              <div
                v-for="(item, i) in v.data"
                :key="i"
                class="ellipsis mb23 fw-500 cursor"
                @click="goUrl(item.url)"
              >
                {{ item.name }}
              </div>
            </div>
            <div v-else class="footer-instructions connection">
              <div class="footer-title ellipsis mb23 fw-800">{{ v.name }}</div>
              <div
                v-for="(item, i) in v.data"
                :key="i"
                class="flex form-line mb23"
              >
                <div class="label">{{ item.name }}：</div>
                <div class="value">{{ item.value }}</div>
              </div>
            </div>
          </template>
          <div class="footer-instructions" style="margin-left: 4.6vw">
            <img class="footer-logo" src="@img/footer-logo.png" alt="" />
            <div class="platform-icon-list ml15 flex" style="margin-top: 4.2vw">
              <a
                class="platform-icon"
                href="https://www.instagram.com/p/CgURF4asodF/?igsh=MXEwaGxteGsxcTUzbQ=="
                target="_blank"
              >
                <img src="@img/ins.png" class="ins-icon" />
              </a>
              <a
                class="platform-icon"
                href="https://youtube.com/@mihunterscooter?si=u41IVufcNc_fU-jD"
                target="_blank"
              >
                <img src="@img/youtube.png" class="youtube-icon" />
              </a>
            </div>
            <div class="web-instructions ml15">
              ©2024 Zhejiang Mihunter Technology Co., Ltd.
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <YouTube
      ref="youtubeRef"
      src="https://youtube.com/@mihunterscooter?si=u41IVufcNc_fU-jD"
      @ready="onReady"
    /> -->
  </div>
</template>
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Pagination, Navigation } from 'swiper/modules'
import YouTube from 'vue3-youtube'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/navigation'

const youtubeRef = ref(null)

const feedbackData = ref({
  email: '',
  context: '',
})

const { state, updateLang, langList } = usePageData()
const { configMenu } = useData()
const { $apiFetch } = useNuxtApp()
// const { data, error } = await useAsyncData('index-data', () =>
//   $apiFetch(`/index`, {
//     method: 'GET',
//     params: {
//       lang: state.value.language,
//     },
//   }),
// )
// if (!error.value) {
//   state.value.index = data.value.data
// }

const goViewAll = () => {
  goUrl(`/products?categoryId=${popularData.value[productIndex.value].id}`)
}

const getTime = (dateTimeString) => {
  const date = new Date(dateTimeString)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要加1
  const day = String(date.getDate()).padStart(2, '0')

  const formattedDate = `${year}-${month}-${day}`
  return formattedDate
}
const productIndex = ref(0)
const cateGoryIndex = ref(0)
const indexData = computed(() => state.value.indexData)

const popularData = computed(
  () => indexData.value?.content?.popularProductCateGory || [],
)
const bannerData = computed(() => indexData.value?.content?.banner.data || [])

const posterData = computed(() => indexData.value?.content?.poster.data || [])

const newsData = computed(() => indexData.value?.content?.news || [])
const messageData = computed(() => indexData.value?.content?.message || {})
const otherData = computed(() => indexData.value?.content?.other || {})

const footerData = computed(() => indexData.value.footer)

const bannerSwiper = useSwiper(bannerData.value)
const posterSwiper = useSwiper(posterData.value)
// const newSwiper = useSwiper(newsData.value)

const feedbackSend = async () => {
  const { email, context } = feedbackData.value
  const res = await $apiFetch(`/submit`, {
    method: 'POST',
    body: {
      email,
      context,
      lang: state.value.language,
    },
  })
  alert(res.message)
}

const cateGoryChange = (index) => {
  if (cateGoryIndex.value + index < 0) {
    return
  }
  if (cateGoryIndex.value + index > popularData.value.length / 3) {
    return
  }
  cateGoryIndex.value += index
  document.getElementById('shop-scroll').scrollLeft =
    cateGoryIndex.value *
    (document.getElementsByClassName('itemview')[0].offsetWidth / 2.2 || 280)
}

const goUrl = (url) => {
  if (url) {
    window.open(url)
    return
  }
  goPdfPage()
}

const goPdfPage = () => {
  window.open('http://admin.mihunter.com/storage/files/Mihunter-Catalog.pdf')
}

const onReady = () => {
  youtubeRef.value?.playVideo()
}

onMounted(() => {
  const shopScroll = document.getElementById('shop-scroll')
  shopScroll.addEventListener('scroll', () => {
    cateGoryIndex.value = Math.floor(
      shopScroll.scrollLeft /
        (document.getElementsByClassName('itemview')[0].offsetWidth / 2.2 ||
          280),
    )
  })
})
</script>
<style lang="scss" scoped>
[data-core-scroller] {
  overflow-x: scroll;
  position: relative;
  scroll-snap-type: mandatory;
  scroll-snap-type: x mandatory;
  // white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.mr12 {
  margin-right: 0.63vw;
}
.total-icon {
  width: 2.26vw;
  height: 2.26vw;
}
.pull-down-list {
  width: 15.62vw;
  .pull-down-item {
    font-weight: bold;
    font-size: 1.25vw;
    color: rgba(0, 0, 0, 0.85);
    height: 2.8vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    cursor: pointer;
  }
}
.itemview {
  transform: translateX(calc(var(--r-sk-logical-factor, 1) * (-14vw + 29.2vw)));
}
.overflow-hidden {
  overflow: hidden;
}
.ml10 {
  margin-left: 10px;
}
.ml15 {
  margin-left: 15px;
}
.x-center {
  position: absolute;
  top: 40%;
  transform: translateY(-40%);
}
.page-website-wrap {
  background: #000000;
}
.platform-icon-list {
  .platform-icon {
    width: 1.875vw;
    height: 1.875vw;
    margin-right: 1.56vw;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.shop-scroll-view {
  width: 100%;
}
.website-footer-wrap {
  min-height: 100%;
  max-height: 100%;
  width: 100%;
  height: 20.9rem;
  background: #272727;
  margin-top: 7.3rem;
  padding-bottom: 2vw;
  .form-line {
    max-width: 13.3rem;
  }
  .label {
    color: #ffffff;
  }
  .value {
    max-width: 14.3vw;
  }
}
.fs36 {
  font-size: 1.89vw;
}
.connection {
  width: 14vw;
  .form-line {
    max-width: 16.3vw;
  }
  .value {
    max-width: 16.3vw;
  }
}
.ml23 {
  margin-left: 23px;
}

.footer-instructions {
  padding-top: 4.9rem;
  margin-right: 2.6vw;
  .footer-title {
    font-size: 1vw;
    color: #ffffff;
  }
  font-size: 0.84vw;
  color: rgba(255, 255, 255, 0.65);
}
.mb23 {
  margin-bottom: 23px;
}
.head-logo {
  width: 14.9vw;
  height: 3.54vw;
}
.footer-logo {
  width: 14.6vw;
  height: 3.6vw;
}
.banner-navigation {
  position: relative;
  top: -66px;
  z-index: 222;
}
.mt40 {
  margin-top: 2.08vw;
}
.feedback-wrap {
  margin-top: 5.2vw;
  width: 75vw;
  height: 33vw;
  border: 6px solid #ffffff;
  .title {
    margin-top: 2.6vw;
  }
  .feedback-instructions {
    font-size: 1.45vw;
    color: rgba(255, 255, 255, 0.5);
  }
  .feedback-email {
    width: 44.8vw;
    height: 4.5vw;
    border: 1px solid #979797;
    margin-top: 3.2vw;
    overflow: hidden;
    padding-left: 1vw;
    input {
      width: 100%;
      height: 100%;
      color: #ffffff;
      font-size: 1.45vw;
      border: none;
      margin: 0;
      padding: 0 1vw;
      overflow: hidden;
      &:active {
        border: none;
      }
    }
  }
  .feedback-icon {
    position: absolute;
    bottom: -70px;
    right: 50px;
    cursor: pointer;
    img {
      width: 9.9vw;
      height: 9.9vw;
    }
  }
  .feedback-message {
    width: 44.8vw;
    height: 10.4vw;
    border: 1px solid #979797;
    margin-top: 1.9vw;
    overflow: hidden;
    padding-left: 1vw;

    textarea {
      width: 44.8vw;
      height: 10.4vw;
      color: #ffffff;
      background: #000000;
      font-size: 1.45vw;
      border: none;
      padding: 1vw;
    }
  }
}
.message-wrap {
  margin-top: 5.21vw;
  .message-list {
    margin-top: 42px;
    .message-title {
      margin-bottom: 1.88vw;
    }
    .message-row {
      width: 24.12vw;
      margin-right: 1.25vw;
      &:last-child {
        margin-right: 0;
      }
    }
    img {
      max-width: min(
        var(--image-mobile-max-width, var(--image-max-width, 100%)),
        100%
      );
    }
    .message-detail {
      margin-top: 0.63vw;
      color: #ffffff;
      .detail-txt {
        font-size: 1.67vw;
      }
      .time {
        margin-top: 0.63vw;
        font-size: 0.84vw;
      }
    }
  }
}
.navigation-list {
  margin: 0 34px;
  .navigation-item {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    margin-right: 24px;
    animation: all;
    &:last-child {
      margin-right: 0;
    }
    &.active {
      width: 34px;
      height: 12px;
      background: #ffffff;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
      border-radius: 6px;
    }
  }
}

.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 定义文本的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
}
.banner-wrap-navigation {
  margin-top: 44px;
}
.mt95 {
  margin-top: 4.95vw;
}
.web-instructions {
  padding-top: 22px;
  font-size: 12px;
  color: #ffffff;
  line-height: 18px;
  text-align: left;
  font-style: normal;
}
.pdt93 {
  padding-top: 6.2vw;
}
.fs-24 {
  font-size: 1.25vw;
}
.white {
  color: #fff;
}
.ml-60 {
  margin-left: 3.125vw;
}
.cursor {
  cursor: pointer;
}
.placard-banner {
  cursor: pointer;
}
.swiper-shop-wrap {
  margin-top: 52px;
  .swiper-shop-item {
    // max-width: min(
    //   var(--image-mobile-max-width, var(--image-max-width, 100%)),
    //   100%
    // );
    width: 32.875vw;
    height: 32.875vw;
    img {
      width: 32.875vw;
      height: 32.875vw;
    }
    height: 100%;
    margin-right: 24px;
    .shop-introduce {
      width: 100%;
      height: 15.625vw;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
      position: absolute;
      bottom: 0;
      padding: 0 2.5vw;
      .shop-title {
        font-size: 3.75vw;
        color: #ffffff;
        margin-top: 44px;
      }
      .shop-tag {
        max-width: 280px;
        background: #00b9ef;
        display: inline-block;
        font-size: 1.25vw;
        color: #000000;
        padding: 0px 6px;
      }
      .shop-detail {
        font-size: 0.84vw;
        color: #ffffff;
        margin-top: 0.94vw;
      }
    }
  }
  .shop-all-btn {
    font-size: 1.875vw;
    color: #ffffff;
    width: 20.01vw;
    height: 4.1vw;
    border: 4px solid #ffffff;
    margin-top: 1.25vw;
    cursor: pointer;
    &:hover {
      // transform: translateY(-20px);
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    }
  }
}
.tab-wrap {
  // width: 1270px;
  .tab-item-wrap {
    font-size: 1.9vw;
    flex: 1;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    &:hover {
      color: #ffffff;
    }
    &.active {
      color: #ffffff;
      position: relative;
      &:after {
        content: '';
        display: block;
        width: 100%;
        height: 0.32vw;
        background: #ffffff;
        position: absolute;
        top: 4vw;
      }
    }
  }
}
.swiper-wrap {
  // max-width: 1920px;
  // min-width: 1200px;
  width: 100%;
}
.page-head {
  position: absolute;
  width: 100%;
  z-index: 2;
}
.swiper-pagination-bullet {
  transform: scale(0.66);
}
.title {
  font-size: 3.34vw;
  color: #ffffff;
}
.banner-wrap {
  // height: 980px;
  // &.placard {
  //   height: 880px;
  // }
  .banner-img {
    min-height: 100%;
    max-height: 100%;
    width: 100%;
    overflow-wrap: anywhere;
    object-fit: cover;
    object-position: center;
    user-select: none;
    -webkit-touch-callout: none;
    grid-area: 1 / 1 / span 3 / span 3;
    position: relative;
  }
  .swiper-slide {
    width: 100% !important;
    height: 100%;
  }
}
.mt60 {
  margin-top: 60px;
}
.mt30 {
  margin-top: 30px;
}
.relative {
  position: relative;
}
.txt-center {
  text-align: center;
}
.border-wrap {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
  margin-top: 1.92vw;
}
:deep(.swiper-button-prev) {
  width: 5.1vw;
  height: 5.1vw;
  &:after {
    content: '';
    background: url('@img/arr-left.png') no-repeat;
    width: 5.1vw;
    height: 5.1vw;
    background-size: 100% 100%;
  }
}
:deep(.swiper-button-next) {
  width: 5.1vw;
  height: 5.1vw;
  &:after {
    content: '';
    background: url('@img/arr-right.png') no-repeat;
    width: 5.1vw;
    height: 5.1vw;
    background-size: 100% 100%;
  }
}
.swiper-pagination {
  color: #fff;
}
</style>
